<template>
  <div class="app">
    <!-- 导航面包屑 -->
    <el-card>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>营销</el-breadcrumb-item>
        <el-breadcrumb-item :to="{path:'/home/coupons'}">优惠卷</el-breadcrumb-item>
        <el-breadcrumb-item>{{this.$store.state.marketing.action}}{{this.$store.state.marketing.addType}}</el-breadcrumb-item>
      </el-breadcrumb>
      <h1>{{this.$store.state.marketing.action}}{{this.$store.state.marketing.addType}}</h1>
    </el-card>

    <!-- 基础信息表 -->
    <el-card>
      <p>基础信息</p>
      <el-row>
        <el-col :span="10">
          <el-form ref="addCoupons" :model="addCouponsForm" label-width="110px">
            <!-- 优惠卷名称 -->
            <el-form-item label="优惠卷名称">
              <el-input v-model="addCouponsForm.name" placeholder="请输入名称"></el-input>
            </el-form-item>
            <!-- 优惠卷描述 -->
            <el-form-item label="优惠卷描述">
              <el-input v-model="addCouponsForm.description" placeholder="请输入描述"></el-input>
            </el-form-item>
            <!-- 发放数量 -->
            <el-form-item label="发放数量">
              <el-input v-model="addCouponsForm.num" placeholder="请输入数量">
                <template slot="append">张</template>
              </el-input>
            </el-form-item>
            <!-- 使用渠道 -->
            <el-form-item label="使用渠道">
              <el-checkbox-group v-model="addCouponsForm.scope">
                <el-checkbox label="微信商场" name="scope"></el-checkbox>
                <el-checkbox label="线下店铺" name="scope"></el-checkbox>
                <el-checkbox label="APP商场" name="scope"></el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            <!-- 可用商品 -->
            <el-form-item label="可用商品">
              <el-radio-group v-model="addCouponsForm.goods">
                <el-radio label="全部商品"></el-radio>
                <el-radio label="部分商品"></el-radio>
              </el-radio-group>
            </el-form-item>
            <!-- 使用门槛 -->
            <el-form-item label="使用门槛">
              <el-radio-group v-model="addCouponsForm.threshold">
                <el-radio label="0">无门槛</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item>
              <el-radio-group v-model="addCouponsForm.threshold">
                <el-radio label="1">
                  <span class="span1">订单满</span>
                  <el-input class="numInp" v-model="addCouponsForm.thresholdNum" placeholder="请输入">
                    <template slot="append">元</template>
                  </el-input>
                  <span>可用</span>
                </el-radio>
              </el-radio-group>
            </el-form-item>
            <!-- 满减金额 -->
            <el-form-item label="满减金额">
              <el-input v-model="addCouponsForm.charge" placeholder="请输入金额">
                <template slot="append">元</template>
              </el-input>
            </el-form-item>
            <!-- 有效期 -->
            <el-form-item label="有效期">
              <el-date-picker
                v-model="addCouponsForm.date"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-dd"
              ></el-date-picker>
            </el-form-item>
            <!-- 提交和返回按钮 -->
            <el-form-item>
              <el-button type="primary" @click="actionCoupons">提交</el-button>
              <el-button @click="toCoupons">返回</el-button>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="14">
          <!-- 手机展示优惠卷详细界面 -->
          <div class="phone">
            <img src="../../../assets/phone.png" alt />
            <div>
              <div>
                <div class="boxLeft">
                  <div class="semicircleLeft"></div>
                  <p>¥{{addCouponsForm.charge?addCouponsForm.charge:0}}</p>
                  <p>满{{addCouponsForm.thresholdNum?addCouponsForm.thresholdNum:0}}可用</p>
                </div>
                <div class="boxRight">
                  <div class="semicircleRight"></div>
                  <p>{{addCouponsForm.name?addCouponsForm.name:'优惠卷'}}</p>
                  <p>有效期至{{addCouponsForm.date|formatDate}}</p>
                </div>
              </div>
              <div>
                <p>领取说明</p>
                <p>每人限领1张</p>
              </div>
              <div>
                <p>优惠说明</p>
                <p>{{addCouponsForm.goods}}可用</p>
              </div>
              <div>
                <p>使用须知</p>
                <p>限{{addCouponsForm.scope|formatScope}}可使用</p>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      addCouponsForm: {
        name: "",
        description: "",
        num: "",
        scope: ["微信商场"],
        goods: "全部商品",
        threshold: "",
        charge: "",
        threshold: "",
        thresholdNum: "",
        isDate: "",
        date: ["2021-7-3", "2020-8-3"],
        getPerson: "",
        level: "",
        type: "",
      },
      //要修改的id
      id: "",
    };
  },
  filters: {
    //格式化有效日期
    formatDate(date) {
      return date[1];
    },
    //格式化使用渠道数据
    formatScope(scope) {
      return scope.join(",");
    },
  },
  methods: {
    //去优惠卷页面
    toCoupons() {
      this.$router.push("/home/coupons");
    },
    //添加优惠卷
    async addCoupons() {
      const { data: res } = await this.$axios.post("/vip/Coupons/add", {
        name: this.addCouponsForm.name,
        type:
          this.$store.state.marketing.addType == "满减卷"
            ? "1"
            : this.$store.state.marketing.addType == "折扣卷"
            ? "2"
            : this.$store.state.marketing.addType == "兑换卷"
            ? "3"
            : "4",
        description: this.addCouponsForm.description,
        num: this.addCouponsForm.num,
        scope: this.addCouponsForm.scope.join(","),
        goods: this.addCouponsForm.goods,
        threshold: this.addCouponsForm.threshold
          ? "0"
          : this.addCouponsForm.thresholdNumInp,
        charge: this.addCouponsForm.charge,
        validity: this.addCouponsForm.date[1],
        status: "1",
      });
      if (res.code != 0) return this.$message.error("优惠卷添加失败!");
      this.$message.success("优惠卷添加成功!");
      this.toCoupons();
    },
    //添加or修改
    actionCoupons() {
      if (this.$store.state.marketing.action == "编辑")
        return this.editCoupons();
      this.addCoupons();
    },
    //修改优惠卷
    async editCoupons() {
      const { data: res } = await this.$axios.post(
        "/vip/Coupons/updateCouposn",
        {
          name: this.addCouponsForm.name,
          type:
            this.$store.state.marketing.addType == "满减卷"
              ? "1"
              : this.$store.state.marketing.addType == "折扣卷"
              ? "2"
              : this.$store.state.marketing.addType == "兑换卷"
              ? "3"
              : "4",
          description: this.addCouponsForm.description,
          num: this.addCouponsForm.num,
          scope: this.addCouponsForm.scope.join(","),
          goods: this.addCouponsForm.goods,
          threshold: this.addCouponsForm.threshold
            ? "0"
            : this.addCouponsForm.thresholdNumInp,
          charge: this.addCouponsForm.charge,
          validity: this.addCouponsForm.date[1],
          status: "1",
          id: this.id,
        }
      );
      if (res.code != 0) return this.$message.error("优惠卷修改失败!");
      this.$message.success("优惠卷修改成功!");
      this.toCoupons();
    },
  },
  mounted() {
    if (!this.$store.state.marketing.action) return this.toCoupons();
    //渲染修改信息
    if (this.$store.state.marketing.action == "编辑") {
      const info = this.$store.state.marketing.editInfo;
      this.addCouponsForm.name = info.name;
      this.addCouponsForm.type =
        info.type == "满减卷"
          ? "1"
          : info.type == "折扣卷"
          ? "2"
          : info.type == "兑换卷"
          ? "3"
          : "4";
      this.addCouponsForm.name = info.name;
      this.addCouponsForm.scope = info.scope.split(",");
      this.addCouponsForm.description = info.description;
      this.addCouponsForm.num = info.num;
      this.addCouponsForm.goods = info.goods;
      this.addCouponsForm.threshold = info.threshold == "0" ? "0" : "1";
      this.addCouponsForm.thresholdNum = info.threshold;
      this.addCouponsForm.charge = info.charge;
      this.addCouponsForm.validity = ["2021-08-01", info.validity];
      this.addCouponsForm.status = info.status;
      this.id = info.id;
    }
  },
};
</script>

<style lang="less" scoped>
.numInp {
  width: 130px;
  margin: 0 15px;
}
.el-date-picker,
.el-select {
  margin: 0 15px;
}
.span1 {
  line-height: 39px;
}
.phone {
  height: 700px;
  width: 365px;
  margin-left: 200px;
  border: 4px solid #eef6ff;
  border-radius: 40px;
  overflow: hidden;

  img {
    height: 78px;
    width: 365px;
    border-bottom: 1.5px solid #eee;
  }

  > div {
    padding: 20px;

    > div:nth-child(1) {
      width: 100%;
      height: 100px;
      background: -webkit-linear-gradient(left top, #1c53ff, #4898f7);
      display: flex;
      padding: 20px 0;

      .boxLeft {
        width: 120px;
        height: 100%;
        position: relative;
        border-right: 1px dashed #eee;
        .semicircleLeft {
          height: 16px;
          width: 16px;
          background-color: #fff;
          position: absolute;
          border-radius: 50%;
          top: 43%;
          left: 0;
          margin-left: -8px;
        }

        p:nth-child(2) {
          color: #fff;
          font-size: 35px;
          font-weight: bold;
          position: absolute;
          top: 5%;
          left: 18%;
        }
        p:nth-child(3) {
          color: #fff;
          font-size: 14px;
          font-weight: bold;
          position: absolute;
          top: 70%;
          left: 18%;
        }
      }

      .boxRight {
        width: 245px;
        height: 100%;
        position: relative;
        .semicircleRight {
          height: 16px;
          width: 16px;
          background-color: #fff;
          position: absolute;
          border-radius: 50%;
          top: 43%;
          right: 0;
          margin-right: -8px;
        }
        p:nth-child(2) {
          color: #fff;
          font-size: 18px;
          font-weight: bold;
          position: absolute;
          top: 20%;
          left: 15%;
        }
        p:nth-child(3) {
          color: rgba(255, 255, 255, 0.7);
          font-size: 14px;
          font-weight: bold;
          position: absolute;
          top: 60%;
          left: 15%;
        }
      }
    }
    > div:nth-child(2),
    > div:nth-child(3),
    > div:nth-child(4) {
      border-bottom: 1px solid #eee;
      p:nth-child(1) {
        font-size: 15px;
        color: #999;
        margin: 10px 0;
      }
      p:nth-child(2) {
        font-size: 13px;
        margin: 10px 0;
      }
    }
  }
}
.app > .el-card:nth-child(2) {
  margin-top: 15px;
}
</style>